<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css">
<script src="<%=basePath %>layui/layui.js"></script>
<script src="<%=basePath %>/backPage/js/jquery.min.js"></script>
<link rel="stylesheet" href="<%=basePath %>backPage/css/soulTable.css" media="all"/>
</head>
<body>
<br/>
<!-- 条件查询 -->
<form class="layui-form" action="" onsubmit="return false;">
  <div class="layui-form-item" style="display: flex; margin-left: 50px;">
    <label class="layui-form-label">商品名</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  placeholder="请输入商品名或关键字" autocomplete="off" class="layui-input">
    </div>
    <label class="layui-form-label">商品类型</label>
    <div class="layui-input-inline">
      <select name="f_ptid" lay-search="" id="serch_f_ptid" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
    <label class="layui-form-label">是否下架</label>
    <div class="layui-input-inline">
      <select name="isSoldOut"  autocomplete="off">
        <option value=""></option>
        <option value="0">未下架</option>
        <option value="1">已下架</option>
      </select>
    </div>
    <label class="layui-form-label">推荐</label>
    <div class="layui-input-inline">
      <select name="isRecommendMain"  autocomplete="off">
        <option value=""></option>
        <option value="1">已推荐</option>
        <option value="0">未推荐</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="serchBtn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</form>
<hr>

<table id="demo" lay-filter="test"></table>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">商品类型</label>
    <div class="layui-input-inline">
      <select name="f_ptid" lay-search="" id="A_f_ptid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品原价</label>
    <div class="layui-input-inline">
      <input type="text" name="oldPrice" required  lay-verify="required|decimal" placeholder="请输入原价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">活动价</label>
    <div class="layui-input-inline">
      <input type="text" name="newPrice" required  lay-verify="required|decimal" placeholder="请输入活动价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品品牌</label>
    <div class="layui-input-inline">
      <input type="text" name="plate" required  lay-verify="required" placeholder="请输入品牌" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品尺寸</label>
    <div class="layui-input-inline">
      <input type="text" name="size" required  lay-verify="required|decimal" placeholder="请输入尺寸" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-inline">
      <input type="text" name="cate" required  lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品厂家</label>
    <div class="layui-input-inline">
      <input type="text" name="factory" required  lay-verify="required" placeholder="请输入厂家" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">生产地</label>
    <div class="layui-input-inline">
      <input type="text" name="area" required  lay-verify="required" placeholder="请输入生产地" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <!-- <div class="layui-input-inline">
      <input type="text" name="description" required  lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
    </div> -->
    <div class="layui-input-inline" style="width: 600px;">
      <textarea id="A_description" class="layui-textarea" name="description" style="display:none"></textarea>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品主图</label>
    <div class="layui-input-inline">
      <input type="text" id="A_imgMain" name="imgMain" lay-verify="required"   placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="A_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  <div class="layui-form-item">
     <label class="layui-form-label">是否在售</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isSoldOut" lay-skin="switch" lay-text="在售|下架" >
     </div>
   </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">权重</label>
    <div class="layui-input-inline">
      <input type="text" name="weight" required  lay-verify="required|number" placeholder="请输入权重" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
     <label class="layui-form-label">展示首页</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isRecommendMain" lay-skin="switch" lay-text="打开|关闭" >
     </div>
   </div>
  <div class="layui-form-item">
     <label class="layui-form-label">成为滚动图</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isRollImg" lay-skin="switch" lay-text="打开|关闭" >
     </div>
   </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" id="A_reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">商品类型</label>
    <div class="layui-input-inline">
      <select name="f_ptid" lay-search="" id="U_f_ptid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品原价</label>
    <div class="layui-input-inline">
      <input type="text" name="oldPrice" required  lay-verify="required|decimal" placeholder="请输入原价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">活动价</label>
    <div class="layui-input-inline">
      <input type="text" name="newPrice" required  lay-verify="required|decimal" placeholder="请输入活动价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品品牌</label>
    <div class="layui-input-inline">
      <input type="text" name="plate" required  lay-verify="required" placeholder="请输入品牌" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品尺寸</label>
    <div class="layui-input-inline">
      <input type="text" name="size" required  lay-verify="required|decimal" placeholder="请输入尺寸" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-inline">
      <input type="text" name="cate" required  lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品厂家</label>
    <div class="layui-input-inline">
      <input type="text" name="factory" required  lay-verify="required" placeholder="请输入厂家" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">生产地</label>
    <div class="layui-input-inline">
      <input type="text" name="area" required  lay-verify="required" placeholder="请输入生产地" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品描述</label>
    <!-- <div class="layui-input-inline">
      <input type="text" name="description" required  lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
    </div> -->
    <div class="layui-input-inline" style="width: 600px;">
      <textarea id="U_description" class="layui-textarea" name="description" style="display:none"></textarea>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品主图</label>
    <div class="layui-input-inline">
      <input type="text" id="U_imgMain" name="imgMain" lay-verify="required"   placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="U_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  
  <div class="layui-form-item">
     <label class="layui-form-label">是否在售</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isSoldOut" id="U_isSoldOut" lay-skin="switch" lay-text="在售|下架" >
     </div>
   </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">权重</label>
    <div class="layui-input-inline">
      <input type="text" name="weight" required  lay-verify="required|number" placeholder="请输入权重" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
     <label class="layui-form-label">展示首页</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isRecommendMain" lay-skin="switch" lay-text="打开|关闭" >
     </div>
   </div>
  <div class="layui-form-item">
     <label class="layui-form-label">成为滚动图</label>
     <div class="layui-input-block">
         <input type="checkbox" name="isRollImg" lay-skin="switch" lay-text="打开|关闭" >
     </div>
   </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" id="U_reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量刪除</button>
	<a class="layui-btn layui-btn-sm layui-btn-normal" id="clear" ><i class="layui-icon layui-icon-delete"></i>清除缓存</a>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="imgTPL">
  <img src="<%=basePath%>{{d.imgMain}}" onclick="hoverOpenImg()" style="width:30px;height:30px" />
</script>
<script>
function hoverOpenImg(){
    var img_show = null;
    $('td div img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(255,255,255,1)']
            ,area: ['220px']
        });
    },function(){
        layer.close(img_show);
    });
}
</script>

<script type="text/html" id="switchSoldOut">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isSoldOutSwitch" lay-skin="switch" lay-text="在售|已下架" {{d.isSoldOut=="0" ? "checked":""}}>
</script>

<script type="text/html" id="switchDel">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isDelSwitch" lay-skin="switch" lay-text="允许|不允许" {{d.isDel=="1" ? "checked":""}} disabled>
</script>

<script type="text/html" id="switchRecommendMain">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isRecommendMainSwitch" lay-skin="switch" lay-text="展示|关闭" {{d.isRecommendMain=="1" ? "checked":""}}>
</script>

<script type="text/html" id="switchRollImg">
    <input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isRollImgSwitch" lay-skin="switch" lay-text="开启|关闭" {{d.isRollImg=="1" ? "checked":""}}>
</script>


<script type="text/javascript">
layui.config({
    version: 'v1.5.14' // 插件版本号
}).extend({                         
    soulTable: '{/}https://cdn.jsdelivr.net/npm/layui-soul-table/docs/ext/soulTable.slim'
}).use(['table','layer','soulTable','form','upload','laydate','layedit'], function(){
	
	  var table = layui.table;
	  var layer = layui.layer;
	  var layedit = layui.layedit;
	  soulTable = layui.soulTable;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  var A_description = "";
	  var U_description = ""; //建立编辑器
	  
	  //第一个实例
var myTable = table.render({
	    elem: '#demo'
	    ,height: 565
	    ,url: '<%=basePath %>back/queryAllProduct' //数据接口
	    ,page: true //开启分页
	    ,id:"showAll"
	    ,limits:[10,50,100]
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,done: function(res, curr, count){
	        soulTable.render(this);//拖拽列
	        if(res.data==null){
	        	currNow = curr-1;  //如果当前页面没有数据了，就让页码-1
	        	//我们需要手动再重新刷新数据表格
	        	table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	
	        }else{
	        	currNow = curr;
	        }
	        
	      }
	    ,drag: {toolbar: true} // 可以实现固定列与非固定列之间的转换
	    ,rowDrag: {// 行拖动
	    	numbers: true
	    }
	    //,even: true
	    ,totalRow: true
	    ,overflow: { // 默认所有表格都超出
	           type: 'tips',
	           header: true, // 表头支持 overflow
	           total: true // 合计行支持 overflow
	    }
	    ,filter: {
            items:['column','data','condition','editCondition','excel','clearCache'],
            cache: true,
        }
	    ,cols: [[ //表头
	    	{type: 'checkbox',}
	      ,{type: 'numbers', title: '序号'}
	      //,{field: 'id', title: 'ID', width:80, sort: true}
	      ,{field: 'productTypeName', filter: true, title: '商品类型', width:120, sort: true}//f_ptid
	      ,{field: 'name', title: '商品名称', width:120,sort: true,filter: true}
	      ,{field: 'oldPrice', title: '原价', width:80, sort: true}
	      ,{field: 'newPrice', title: '打折价', width:160,sort: true} 
	      ,{field: 'plate', title: '品牌',hide:true, width:160,sort: true} 
	      ,{field: 'size', title: '尺寸',hide:true, width:160,sort: true} 
	      ,{field: 'cate', title: '类型', width:160,sort: true} 
	      ,{field: 'factory', title: '厂家', width:160,sort: true} 
	      ,{field: 'area', title: '生产地址', width:160,sort: true} 
	      ,{field: 'description', title: '商品描述', width:160,sort: true} 
	      ,{field: 'isRollImg', title: '显示到滚动图', width: 130,toolbar:'#switchRollImg'}
	      ,{field: 'imgMain', title: '主图', width: 150,templet: '#imgTPL'}
	      ,{field: 'weight', title: '权重', width: 150,sort: true,hide:true}
	      ,{field: 'isSoldOut', title: '是否下架', width: 130, toolbar:'#switchSoldOut'}
	      ,{field: 'isDel', title: '允许删除',fixed: 'right', width: 130, toolbar:'#switchDel'}
	      ,{field: 'isRecommendMain', title: '推荐到首页',fixed: 'right', width: 180,toolbar:'#switchRecommendMain'}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });
	  	
	    $('#clear').on('click', function() {
	        soulTable.clearCache(myTable.config.id);
	        layer.msg('已还原！', {icon: 1, time: 1000});
	    })
	  
	//自定义添加的验证规则，自带有phone，decimal
      form.verify({
          decimal:[/^[0-9]+([.]{1}[0-9]+){0,1}$/, '只能为小数或整数'],//验证价格
          number:[/^\d{0,8}$/,'只能为整数长度不过8位'],//验证数值
          age: [/^([1-9][0-9]{0,1}|100)$/, '年龄必须为100以内'],//验证年龄
          count:[/^\+?[1-9][0-9]{0,2}$/, '购买数量不能超过4位数']//购买商品数量的限制
      });
	  
	  
	//监听提交[搜索]//name,f_ptid,isSoldOut
	  form.on('submit(serchBtn)', function(data){
	    //console.log(data.field);  //可以得到相关的参数值
	    //我们需要带着这些参数，重载一下表格就ok
	    table.reload('showAll', {
		  where: { //设定异步数据接口的额外参数，任意设
		    name: data.field.name
		    ,f_ptid: data.field.f_ptid
		    ,isSoldOut: data.field.isSoldOut
		    ,isRecommendMain: data.field.isRecommendMain
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		}); //只重载数据
	  });
	  
	  
		$.post("<%=basePath%>back/queryProductTypeName",{
		  },function(res){
			  for(var i=0; i<res.length; i++){
				  $("#serch_f_ptid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
				  $("#A_f_ptid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
				  $("#U_f_ptid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
				  form.render('select');  //让表单当中的select重新渲染
			  }
		  },'json');
		
		// 处理开关点击时把信息传入到后台进行修改
	      form.on('switch(isSoldOutSwitch)', function (data) {
	          var id = $(this).attr('data-id');//获得当前点击对象的id值
	          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
	          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
	          layer.open({
	              content: '确定要修改当前状态吗？'//给用户的友好提示
	              ,btn: ['确定', '取消']
	              ,yes: function(index, layero){
	                  data.elem.checked=x;
	                  layer.close(index);
	                  $.ajax({
	                      type : "POST",
	                      url : "<%=basePath %>back/editProductIsSoldOutSwitchById/"+id+"/"+valid,
	                      data : {},/*"id" : id , "valid" : valid*/
	                      success : function(res) {
	                          if(res){
	                              layer.msg("修改成功！");
	                          }else{
	                              layer.msg("修改失败！");
	                          }
	                          form.render();
	                      },
	                      error : function() {
	                      }
	                  });
	              }
	              ,btn2: function(index, layero){
	                  //按钮【按钮二】的回调
	                  data.elem.checked=!x;
	                  form.render();
	                  layer.close(index);
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	              ,cancel: function(){
	                  //右上角关闭回调
	                  data.elem.checked=!x;
	                  form.render();
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	          });
	          form.render();
	          return false;

	      });
		// 处理开关点击时把信息传入到后台进行修改
	      form.on('switch(isDelSwitch)', function (data) {
	          var id = $(this).attr('data-id');//获得当前点击对象的id值
	          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
	          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
	          layer.open({
	              content: '确定要修改当前状态吗？'//给用户的友好提示
	              ,btn: ['确定', '取消']
	              ,yes: function(index, layero){
	                  data.elem.checked=x;
	                  layer.close(index);
	                  $.ajax({
	                      type : "POST",
	                      url : "<%=basePath %>back/editProductIsDelSwitchById/"+id+"/"+valid,
	                      data : {},/*"id" : id , "valid" : valid*/
	                      success : function(res) {
	                          if(res){
	                              layer.msg("修改成功！");
	                          }else{
	                              layer.msg("修改失败！");
	                          }
	                          form.render();
	                      },
	                      error : function() {
	                      }
	                  });
	              }
	              ,btn2: function(index, layero){
	                  //按钮【按钮二】的回调
	                  data.elem.checked=!x;
	                  form.render();
	                  layer.close(index);
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	              ,cancel: function(){
	                  //右上角关闭回调
	                  data.elem.checked=!x;
	                  form.render();
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	          });
	          form.render();
	          return false;

	      });
		// 处理开关点击时把信息传入到后台进行修改
	      form.on('switch(isRecommendMainSwitch)', function (data) {
	          var id = $(this).attr('data-id');//获得当前点击对象的id值
	          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
	          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
	          layer.open({
	              content: '确定要修改当前状态吗？'//给用户的友好提示
	              ,btn: ['确定', '取消']
	              ,yes: function(index, layero){
	                  data.elem.checked=x;
	                  layer.close(index);
	                  $.ajax({
	                      type : "POST",
	                      url : "<%=basePath %>back/editProductIsRecommendMainSwitchById/"+id+"/"+valid,
	                      data : {},/*"id" : id , "valid" : valid*/
	                      success : function(res) {
	                          if(res){
	                              layer.msg("修改成功！");
	                          }else{
	                              layer.msg("修改失败！");
	                          }
	                          form.render();
	                      },
	                      error : function() {
	                      }
	                  });
	              }
	              ,btn2: function(index, layero){
	                  //按钮【按钮二】的回调
	                  data.elem.checked=!x;
	                  form.render();
	                  layer.close(index);
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	              ,cancel: function(){
	                  //右上角关闭回调
	                  data.elem.checked=!x;
	                  form.render();
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	          });
	          form.render();
	          return false;

	      });
		// 处理开关点击时把信息传入到后台进行修改
	      form.on('switch(isRollImgSwitch)', function (data) {
	          var id = $(this).attr('data-id');//获得当前点击对象的id值
	          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
	          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
	          layer.open({
	              content: '确定要修改当前状态吗？'//给用户的友好提示
	              ,btn: ['确定', '取消']
	              ,yes: function(index, layero){
	                  data.elem.checked=x;
	                  layer.close(index);
	                  $.ajax({
	                      type : "POST",
	                      url : "<%=basePath %>back/editProductIsRollImgSwitchById/"+id+"/"+valid,
	                      data : {},/*"id" : id , "valid" : valid*/
	                      success : function(res) {
	                          if(res){
	                              layer.msg("修改成功！");
	                          }else{
	                              layer.msg("修改失败！");
	                          }
	                          form.render();
	                      },
	                      error : function() {
	                      }
	                  });
	              }
	              ,btn2: function(index, layero){
	                  //按钮【按钮二】的回调
	                  data.elem.checked=!x;
	                  form.render();
	                  layer.close(index);
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	              ,cancel: function(){
	                  //右上角关闭回调
	                  data.elem.checked=!x;
	                  form.render();
	                  //return false 开启该代码可禁止点击该按钮关闭
	              }
	          });
	          form.render();
	          return false;

	      });
		
		
	  
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		console.log(obj);
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        /* var data = checkStatus.data;
	        layer.alert(JSON.stringify(data)); */
	        layer.open({
	        	  type: 1,
	        	  title:"添加页面",
	        	  area: ['900px', '500px'],
	        	  content: $('#A_form'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	  end:function(res){
                      //当点击关闭页面弹窗后触发重置按钮，清空内容
                      $("#A_reset").click();
                  }
	        	});
	        layui.use(['layedit'], function(){
	    		var layedit=layui.layedit;
	    		A_description = layedit.build('A_description',{height: 180,}); //建立编辑器
	    	});
	        
	      break;
	      case 'delAll':
	    	  var data = checkStatus.data;
	    	  if(data.length > 0){
	    		  layer.confirm('真的删除行这'+data.length+'行么', function(index){
	  	  	        var ids = "";
	  	  	        //通过循环将选中的id，用逗号拼接成一个字符串，例如：1，2，3，
	   	  	        for(var i =0; i<data.length; i++){
	  	  	        	ids += data[i].id+",";
	  	  	        }
	  	  	        
	  	  	        $.get("<%=basePath%>back/queryAllOrderInfoByIds",{ids:ids},function(res){
	  	  	        	if(res){
	  	  	        		//conlole.log(res);
	  	  	        		layer.msg("有些商品用户已下单无法删除！");
	  	  	        	}else{
	  	  	        		$.get("<%=basePath%>back/queryAllImagesByIds",{ids:ids},function(res){
	  	  	        			//返回为true说明商品下图片有内容就不能直接的删除
	  	  	        			if(res){
	  	  	        				layer.msg("这些商品下有对应的商品图片不能直接删除！");
	  	  	        			}else{
	  	  	        				//如没查询出用户下单者可删除
	  			  	  	        	$.post("<%=basePath%>back/delAllProductByIds",{
	  				  	  	        	ids:ids
	  				  	  	        },function(res){
	  				  	  	        	if(res){
	  				  	  	        		layer.msg("删除成功");
	  				  	  	        		layer.closeAll('page');
	  				  	  	        		table.reload('showAll', {
	  				  	  		    			  where: { //设定异步数据接口的额外参数，任意设
	  				  	  		    			  }
	  				  	  		    			  ,page: {
	  				  	  		    			    curr: currNow //获取当前的页码
	  				  	  		    			  }
	  				  	  		    			}); //只重载数据
	  				  	  	        	}else{
	  				  	  	        		layer.msg("删除失败");
	  				  	  	        		layer.closeAll('page');
	  				  	  	        	}
	  				  	  	        },'json'); 
	  	  	        			}
	  	  	        			
	  	  	        		})
	  	  	        		
	  	  	        	}
	  	  	        })
	  	    	  })
	    	  }else{
	    		  layer.msg("你还未选中要删除的行！");
	    	  }
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;  //当前行的所有数据
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        //点击确定按钮的时候才会进来
	        var id = obj.data.id;
	        //queryAllOrderInfoById
	        $.get("<%=basePath%>back/queryAllOrderInfoByIds",{ids:id},function(res){
	        	
	        	if(res){
	        		layer.msg("该商品有用户已下单无法删除！");
	        	}else{
	        		$.get("<%=basePath%>back/queryAllImagesByIds",{ids:id},function(res){
	        			//返回为true说明商品下图片有内容就不能直接的删除
  	        			if(res){
  	        				layer.msg("该商品下有对应的商品图片不能直接删除！");
  	        			}else{
  	        				
  	        				$.post("<%=basePath%>back/delProductById/"+id,{},function(res){
	  	  	    	        	if(res){
	  	  	    	        		layer.msg("删除成功");
	  	  	    	        		layer.closeAll('page');
	  	  	    	        		table.reload('showAll', {
	  	  	    		    			  where: { //设定异步数据接口的额外参数，任意设
	  	  	    		    			  }
	  	  	    		    			  ,page: {
	  	  	    		    			    curr: currNow //获取当前的页码
	  	  	    		    			  }
	  	  	    		    			}); //只重载数据
	  	  	    	        	}else{
	  	  	    	        		layer.msg("删除失败");
	  	  	    	        		layer.closeAll('page');
	  	  	    	        	}
	  	  	    	        },'json');
  	        				
  	        			}
	        			
	        		});
	        		
	        	}
	        	
	        });
	        
	      });
	    } else if(obj.event === 'edit'){
	    	 layer.open({
	        	  type: 1,
	        	  title:"修改页面",
	        	  area: ['900px', '500px'],
	        	  content: $('#U_form'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	  end:function(res){
                      //当点击关闭页面弹窗后触发重置按钮，清空内容
                      $("U_reset").click();
                  }
	        	});
	    	 layui.use(['layedit'], function(){
		    		var layedit=layui.layedit;
		    		
		     });
	    	 form.val('U_form', data);
	    	 U_description = layedit.build('U_description',{height: 180,}); //建立编辑器
	    	//要给修改的表单回显数据
	    	 form.val('U_form', data);
	    	//isSoldOut,isRecommendMain,isRollImg
	    	if(data.isSoldOut == 0){
                $("#U_isSoldOut").prop("checked",true);
                form.render();
            }else{
                $("#U_isSoldOut").prop("checked",false);
                form.render();
            }
	    	//data
	    }
	  });
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    if(layedit.getText(A_description) == "" || layedit.getText(A_description) == null){
	    	layer.msg("商品描述内容不能为空，请输入描述内容的信息！");	
	    }else{
	    	$.post("<%=basePath%>back/addProduct",{
		    	f_ptid:data.field.f_ptid,
		    	name:data.field.name,
		    	oldPrice:data.field.oldPrice,
		    	newPrice:data.field.newPrice,
		    	plate:data.field.plate,
		    	size:data.field.size,
		    	cate:data.field.cate,
		    	factory:data.field.factory,
		    	area:data.field.area,
		    	description:layedit.getText(A_description),
		    	imgMain:data.field.imgMain,
		    	isSoldOutStatus:data.field.isSoldOut,
		    	weight:data.field.weight,
		    	isRecommendMainStatus:data.field.isRecommendMain,
		    	isRollImgStatus:data.field.isRollImg,
		    },function(res){
		    	if(res){
		    		layer.close(layer.index);
		    		layer.msg("添加成功");
		    		layer.closeAll('page');
		    		table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: 1 //重新从第 1 页开始
		    			  }
		    			}); //只重载数据
		    		//将表单中的数据进行清空【js的reset方法】	
		    	}else{
		    		layer.close(layer.index);
		    		layer.msg("添加失败");
		    		layer.closeAll('page');
		    		$("#A_form")[0].reset();
		    	}
		    },'json');
	    }
	    
	  });
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
		  if(layedit.getText(U_description) == "" || layedit.getText(U_description) == null){
		    	layer.msg("商品描述内容不能为空，请输入描述内容的信息！");	
		  }else{
			  
			//我们 需要发送一个请求，带上我们的参数。
			    $.post("<%=basePath%>back/editProductById",{
			    	id:data.field.id,
			    	f_ptid:data.field.f_ptid,
			    	name:data.field.name,
			    	oldPrice:data.field.oldPrice,
			    	newPrice:data.field.newPrice,
			    	plate:data.field.plate,
			    	size:data.field.size,
			    	cate:data.field.cate,
			    	factory:data.field.factory,
			    	area:data.field.area,
			    	description:layedit.getText(U_description),
			    	imgMain:data.field.imgMain,
			    	isSoldOutStatus:data.field.isSoldOut,
			    	weight:data.field.weight,
			    	isRecommendMainStatus:data.field.isRecommendMain,
			    	isRollImgStatus:data.field.isRollImg,
			    },function(res){
			    	if(res){
			    		layer.close(layer.index);
			    		layer.msg("修改成功");
			    		layer.closeAll('page');
			    		table.reload('showAll', {
			    			  where: { //设定异步数据接口的额外参数，任意设
			    			  }
			    			  ,page: {
			    			    curr: currNow //重新从第 1 页开始
			    			  }
			    			}); //只重载数据
			    		//将表单中的数据进行清空【js的reset方法】
			    		$("#U_form")[0].reset();
			    	}else{
			    		layer.close(layer.index);
			    		layer.msg("修改失败");
			    		layer.closeAll('page');
			    		$("#U_form")[0].reset();
			    	}
			    },'json');
		  }
	    
	  });
	  
	  //添加表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#A_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#A_imgMain").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  //修改表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#U_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //把路径添加到文本框
	      $("#U_imgMain").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  
	  
	});


</script>
</body>
</html>